<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .bgr .one{
          background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.7Be1RhEislI8xrCbo_PakAHaHa?w=171&h=180&c=7&r=0&o=5&dpr=1.7&pid=1.7.png);
          height: 300px;
          background-repeat: no-repeat;
        }

        
        .bgr .two{
          background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.7Be1RhEislI8xrCbo_PakAHaHa?w=171&h=180&c=7&r=0&o=5&dpr=1.7&pid=1.7);
          height: 300px;
          background-repeat: repeat-x;
        }

        
        .bgr .three{
          background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.7Be1RhEislI8xrCbo_PakAHaHa?w=171&h=180&c=7&r=0&o=5&dpr=1.7&pid=1.7);
          height: 700px;
          width: 500px;
          background-repeat: repeat-y;
        }

        
        .bgr .four{
          background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.7Be1RhEislI8xrCbo_PakAHaHa?w=171&h=180&c=7&r=0&o=5&dpr=1.7&pid=1.7);
          height: 300px;
          background-repeat: repeat;
        } */
         .bgp .one {
            background-image: url(./zhong.jpg);
            height: 500px;
            background-repeat: no-repeat;
            background-color: purple;

            background-position: center;
         }

    </style>
</head>
<body>
        <div class="bgp">
            <div class="one">背景居中</div>
        </div>
        <!-- <div class="bgr"> -->
        <!-- <div class="one">不平铺</div> -->
        <!-- <div class="two">水平平铺</div> -->
        <!-- <div class="three">垂直平铺</div> -->
        <!-- <div class="four">正常平铺</div> -->
        <!-- </div> -->
</body>
</html>